<!-- 订单详情页 -->
<template>
  <div id="arctive">
    <div class="content-date">
      <div class="content-date-left">订单号：{{list.receiptcode}}</div>
      <!-- <div class="content-date-right">{{list.peoplenum}}&nbsp;用餐</div> -->
    </div>
    <div class="content-wrapper">
      <div class="content-nav" v-for="item of stateList" :key="item.id">
        <div class="content-title">
          <span><img :src="item.goodEntity.imgurl"></span>
          <span class="content-number">
                <span>{{item.goodname}}</span>
          <span class="deal">x{{item.num}}</span>
          </span>
        </div>
        <div class="content-price">￥{{item.price}}</div>
      </div>
    </div>
    <div class="detailed-wrapper">
      <div class="detailed-content">
        <span class="detailed-title">房间号</span>
        <span class="detailed-number">{{list.address}}</span>
      </div>
      <div class="detailed-content">
        <span class="detailed-title">用户名</span>
        <span class="detailed-number">{{list.customername}}</span>
      </div>
      <div class="detailed-content">
        <span class="detailed-title">手机号</span>
        <span class="detailed-number">{{list.phone}}</span>
      </div>
      <div class="detailed-content">
        <span class="detailed-title">用餐人数</span>
        <span class="detailed-number">{{list.peoplenum}}人</span>
      </div>
      <div class="detailed-content">
        <span class="detailed-title">用餐时间</span>
        <span class="detailed-number">{{list.sendtime}}</span>
      </div>
      <div class="detailed-content">
        <span class="detailed-title">备注</span>
        <span class="detailed-number">{{list.remark}}</span>
      </div>
    </div>
    <div class="submit-wrapper">
      <div class="feed-title">回复</div>
      <textarea class="feedback-back-text" v-model="feed" placeholder="对于评价的回复~"></textarea>
      <div class="submit" @click="submit()" v-if="isreply !==1">提交</div>
    </div>
  </div>
</template>

<script>
import apis from '../../../static/js/apis'
import { querystring } from 'vux'
export default {
  data () {
    return {
      id: '',
      userid: '',
      stateList: [],
      list: {},
      detailedList: {},
      status: '',
      feed: '',
      isreply: 0,
      useridobj: {}
    }
  },
  methods: {
    postFormData () {
      this.$axios
        .post(
          apis + '/shenglian-fast/app/weixinapp/goodreceiptinfo', {
            id: this.id
          }
        )
        .then(response => {
          if (response.data.msg === 'success') {
            this.detailedList = response.data
            this.list = this.detailedList.recepit
            this.stateList = this.detailedList.recepititem
            if (this.detailedList.notice !== null) {
              this.isreply = this.detailedList.notice.isreply
              this.feed = this.detailedList.notice.recontent
            }
          } else {
            this.$dialog.toast({mes: '数据错误，请联系管理员', timeout: 1000})
          }
        })
        .catch(error => {
          console.log(error)
          this.$dialog.toast({mes: '服务器异常，稍后再试！', timeout: 1000})
        })
    },
    submit () {
      if (this.feed !== '') {
        this.$axios
          .post(
            apis + '/shenglian-fast/app/weixinapp/receiptreply', {
              id: this.id,
              contents: this.feed,
              wxuserinfoid: this.userid
            }
          )
          .then(response => {
            console.log(response)
            if (response.data.msg === 'success') {
              this.isreply = 1
              this.$dialog.toast({
                mes: '提交成功',
                timeout: 1000
              })
            } else {
              this.$dialog.toast({mes: '数据提交错误，请联系管理员', timeout: 1000})
            }
          })
          .catch(error => {
            console.log(error)
            this.$dialog.toast({mes: '服务器异常，稍后再试！', timeout: 1000})
          })
      } else {
        this.$dialog.toast({mes: '评价不能为空', timeout: 1000})
      }
    }
  },
  components: {
    apis
  },
  created () {
    this.useridobj = querystring.parse()
    this.userid = this.useridobj.wxuserinfoid
    this.id = this.useridobj.id
    this.postFormData()
  }
}
</script>

<style scoped>
  #arctive {
    padding: 8px;
    box-sizing: border-box;
    width: 100%;
    position: fixed;
    background-color: #F2F2F2;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .state-wrapper {
    background: #FFF;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    height: 75px;
    padding: 0 31px 0 16px;
    /*line-height: 30px;*/
  }
  .remind {
    margin-top: 11px;
    font-size: 14px;
    color: #999999;
  }
  .state-wrapper img {
    margin-top: 6px;
    height: 32px;
    width: 32px;
  }
  .content-wrapper {
    box-sizing: border-box;
    padding: 0 16px;
    background-color: #FFF;
    overflow: auto;
    width: 100%;
  }
  .content-date-left {
    text-align: left;
    flex: 1;
    padding-left: 16px;
    color: #333333;
  }
  .content-date {
    height: 45px;
    padding-right: 16px;
    margin-top: 8px;
    line-height: 45px;
    /*margin-left: 235px;*/
    display: flex;
    justify-content: flex-end;
    font-size: 14px;
    color: #92D4EF;
    background-color: #FFFFFF;
    /*float: right;*/
  }
  .content-nav {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #F2F2F2;
    padding: 15px 0;
  }
  .content-nav img {
    height: 30px;
    width: 30px;
  }
  .content-title {
    display: flex;
  }
  .content-number {
    display: flex;
    flex-direction: column;
    margin-left: 15px;
    font-size: 14px;
    line-height: 15px;
  }
  .deal {
    color: #999999;
  }
  .content-price {
    color: #999999;
    font-size: 14px;
    line-height: 34px;
  }
  .detailed-wrapper {
    margin-top: 8px;
    background: #FFFFFF;
    padding: 0 16px;
  }
  .detailed-content {
    display: flex;
    justify-content: space-between;
    height: 45px;
    line-height: 45px;
    font-size: 14px;
    border-top: 1px solid #f2f2f2;
  }
  .detailed-title {
    color: #333333;
  }
  .detailed-number {
    color: #999999;
  }
  .submit-wrapper {
    margin-top: 10px;
    background: #fff;
    width: 100%;
    padding: 16px;
  }
  .feed-title {
    font-size: 14px;
  }
  .feedback-back-text {
    margin: 10px 0;
    width: 100%;
    height: 150px;
    overflow-y: auto;
    border: 1px solid #d7d7d7;
    font-size: 14px;
    padding: 10px;
    border-radius: 5px;
  }
  .submit {
    width: 50%;
    margin: 20px auto;
    background: #92d4ef;
    color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    text-align: center;
    border-radius: 5px;
  }
</style>
